<template>
    <div class="single_article">
        <h2>{{ title }}</h2>
        <span>{{ content }}</span>
        <div class="mask"></div>
    </div>
</template>

<script>
export default {
    props: {
        title: String,
        content: String
    }
}
</script>

<style lang="less" scoped>
.single_article {
    word-wrap: break-word;
    background-color: rgba(255, 255, 255, 0.2);
    min-width: 200px;
    max-width: 300px;
    min-height: 200px;
    max-height: 300px;
    padding: 24px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 20px;

    --mask-percent: 30%;
    --mask-color: #4a4a4a;
    --mask-linear-gradient: linear-gradient(
        transparent 0%,
        transparent var(--mask-percent),
        transparent calc(100% - var(--mask-percent)),
        black 100%
    );
    & .mask {
        top: 0px;
        left: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-mask-image: var(--mask-linear-gradient);
        background-color: var(--mask-color);
        mask-image: var(--mask-linear-gradient);
    }

    & span {
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
    }

    &:hover {
        & span {
            color: rgba(255, 255, 255, 1);
            transform: translateY(-5px);
        }
    }
}
</style>